<template>
	<view>
		<view class="headerVue flex-between align-center">
			<view class="flex align-center">
				<image src="../static/back.png" style="width: 36rpx; height: 36rpx; margin-right: 10rpx;" v-if="isBack" @click="$tools.back()"></image>
				<view class="title">{{title}}</view>
			</view>
			<u-icon :name="rightIcon" color="#fff" size="38" v-if="rightIcon" @click="popupFun()"></u-icon>
		</view>
		<view style="height: 92rpx;"></view>
		<u-popup v-model="show" mode="center" border-radius="12">
			<view class="popupVue relative">
				<!-- 设置 -->
				<template v-if="rightIcon==='setting'">
					<view class="text-center padding30" style="color: #000; font-weight: 600; font-size: 32rpx;">设置</view>
					<view class="item flex-between align-center padding-row30">
						<text style="color: #7D8DA1; font-weight: 600;">手机号</text>
						<text style="color: #000; font-weight: 600;" v-if="user.phone">{{ user.phone | conceal()}}</text>
					</view>
					<view class="item flex-between align-center padding-row30">
						<text style="color: #7D8DA1; font-weight: 600;">我的会员</text>
						<text style="color: #000; font-weight: 600;">{{user.membershipName?user.membershipName:'基础会员'}}</text>
					</view>
					<view class="btn margin50" @click="loginout">退出登录</view>
					<u-gap height="50"></u-gap>
				</template>

				<!-- 客服 -->
				<template v-if="rightIcon==='server-fill'">
					<view class="text-center padding30" style="color: #fff; font-weight: 600; font-size: 32rpx; background: linear-gradient(to right, #E58579, #77A9D2);">客服</view>
					<image :src="serviceImg" mode="widthFix"></image>
				</template>

				<!-- 消息 -->
				<template v-if="rightIcon==='bell'">
					<view class="text-center padding30" style="color: #000; font-weight: 600; font-size: 32rpx;">消息</view>
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		props: {
			title: {
				type: String,
				default: ""
			},
			rightIcon: {
				type: String,
				default: ""
			},
			isBack: {
				type: Boolean,
				default: false
			},
		},
		data(){
			return {
				show: false,
				serviceImg: ""
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		methods: {
			popupFun(){
				this.show = true
				if(this.rightIcon==='server-fill') this.getService()
			},
			async loginout(){
				const res = await this.$request('/aiet-user-center/user/logout')
				if(res.code===200) {
					this.$u.toast("退出成功")
					this.$store.state.user = {}
					this.$store.state.isLogin = false
					this.$store.state.tabbarCurrent = 0
					this.show = false
				}else{
					this.$u.toast(res.msg)
				}
			},
			getService(){
				this.$request("/shuziren/customer", {}, "GET").then(res=>{
					if(res.code===200) {
						console.log(res)
						this.serviceImg = res.data[0].url
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.headerVue {
	width: 100%;
	height: 92rpx;
	padding: 0 30rpx;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background: linear-gradient(to right, #10B981, #3B82F6);
	.title {
		font-weight: 600;
		font-size: 32rpx;
		color: #fff;
	}
	.right {
		position: absolute;
		top: 24rpx;
		right: 30rpx;
	}
}

.popupVue {
	width: 650rpx;
	.item {
		width: 100%;
		height: 120rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.btn {
		width: 520rpx;
		height: 88rpx;
		background: linear-gradient(to right, #49DC83, #3B83F4);
		border-radius: 12rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
	}
}
</style>
